JULog

Wrap Observably

July 08, 2020

ISSUE

  • 카카오 맵 sdk 사용

  • 카카오 맵에서 네이버 맵, 구글 맵으로 바로 바꿀 수 있도록 추상화를 하기

    • 카카오 맵메소드 추상화
    • 서비스로 파일 분리
    • 옵저버블한 상태로 변경

추상화하기 전 로직

main.ts

navigator.geolocation.getCurrentPosition((result) => {
    const geocoder = new kakao.maps.services.Geocoder();
    geocoder.coord2RegionCode(result.coords.longitude, result.coords.latitude, (coordRes, status) => {
      if (status === kakao.maps.services.Status.OK) {
        this.api.getDistrictFromCode(coordRes[0].code).pipe(
          tap(([ city = '', district = '', town = '' ]) => {
            this.formGroup.patchValue({
              city, district, town,
              position: [ result.coords.latitude, result.coords.longitude ]
            });
          })
        ).subscribe();
      } else {
        console.error(status);
      }
    });
  },
);

추상화 후 로직

main.ts

this.geolocation.getCurrentPosition().pipe(
		mergeMap((result) => {
      return this.geolocation.coord2RegionCode(result.longitude, result.latitude).pipe(
        mergeMap((regionCode: string) => {
          return this.api.getDistrictFromCode(regionCode).pipe(
            tap(([ city = '', district = '', town = '' ]) => {
              this.formGroup.patchValue({
                city, district, town,
                position: [ result.latitude, result.longitude ]
              });
            }),
          )
        })
      )
    }),
).subscribe()
  • 서비스를 사용하는 쪽에서는 서비스 내부로직에서 무엇을 하는지 모름
  • 내부 로직이 어떻게 생겼는지는 모르지만 필요한 파라미터만 넘겨주면 됨

service.ts

coord2RegionCode(longitude: number, latitude: number) {
    return new Observable(observer => {
      kakao.maps.load(() => {
        const geocoder = new kakao.maps.services.Geocoder();
        geocoder.coord2RegionCode(longitude, latitude, (coordRes, status) => {
          if (status === kakao.maps.services.Status.OK) {
            observer.next(coordRes[0].code);
            observer.complete();
          } else {
            observer.error(status);
          }
        });
      });
    });
  }
  • 서비스 내부 로직
Written by@[Ju Chan Hwang]
JUlog에 오신걸 환영합니다🤗 저에 대해 궁금하다면, 👆제 이름을 눌러보세요

GitHubFacebook